<template>
	<view class="confirmOrder" v-if="orderData!=null">
		<uninavbar title="订单" leftIcon='leftIcon' rightIcon='' rightText="" urlType='order' />
		<view class="timePayment">
			<view class="timeText">
				交易剩余时间
				<uni-countdown class="uni-countdown" v-if="countdownShow" :show-day="false" :day="0" :hour="0"
					:minute="0" :second="second" :show-colon="false" color="#FFFFFF" @timeup="timeup"
					background-color="#6954D5">
				</uni-countdown>
			</view>

			<view class="money">
				¥ <text>{{orderData.payAmount}}</text>
			</view>

		</view>
		<view class="paymentTitle">
			支付方式
		</view>
		<view class="paymentList">

			<view class="paymentDom" v-for="(item,index) in paymentList" @tap="payment(index)">
				<view class="paymentName">
					<image :src="item.img" mode=""></image>
					{{item.name}}
				</view>
				<view class="">
					<view class="paymentHide" v-if="!item.paymentShow">

					</view>
					<view class="paymentShow" v-else>
						<image src="/static/images/productDetails/show.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="paymentfiex">
			<!-- <navigator class="item" url="/order/payment"> -->
			<view class="paymentBtn" @click="open">
				确定交易
			</view>
			<!-- </navigator> -->
		</view>

		<uni-popup class="uniPopupBtn " ref="popup" type="bottom" :animation="true">
			<view class="uniPopupTitle">
				<image src="/static/images/guanbi.png" mode="widthFix" @click="close()"></image>
				<view class="">

					沙漏商城
				</view>
				<view class="money">
					¥{{orderData.payAmount}}
				</view>
			</view>
			<view class="uniPopupList">
				<view class="">
					账号
				</view>
				<view class="">
					177******13
				</view>

			</view>
			<view class="uniPopupList">
				<view class="">
					交易方式
				</view>
				<view class="popupTitle">
					<image class="popupTitleImg" src="/static/images/productDetails/yeb.png" mode="widthFix"></image>
					余额宝
				</view>

			</view>
			<view class="channel">


				<view class="channelList">

					<view class="channelTitle">
						资金渠道
					</view>
					<view class="">
						货币基金赎回资金
					</view>
					<view class="payType">
						<image src="/static/images/productDetails/yeb.png" mode="widthFix"></image>
						<view class="popupTitle">
							余额宝

							<view>
								由蚂蚁基金提供服务
							</view>
						</view>


					</view>
				</view>

				<view class="channelList">

					<view class="channelTitle">
						支付工具
					</view>
					<view class="payType">
						<image src="/static/images/productDetails/yh.png" mode="widthFix"></image>
						<view class="popupTitle">
							建设银行储蓄卡（8291）
						</view>
					</view>
				</view>
				<view class="paymenAll">
					查看全部
				</view>
			</view>
			<navigator class="item" url="/order/payment">
				<view class="paymentBtn">
					确定交易
				</view>
			</navigator>
			<view class="tip">
				本服务有支付宝（杭州）信息技术有限公司提供
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import API from '@/config/newApi.js'
	export default {
		components: {
			uninavbar,
		},
		data() {
			return {
				paymentList: [{
						name: '支付宝',
						id: '1',
						paymentShow: false,
						img: require('../static/images/productDetails/zfb.png')
					}, {
						name: '微信',
						id: '2',
						paymentShow: false,
						img: require('../static/images/productDetails/wx.png')
					},
					// {
					// 	name: '中国建设银行',
					// 	id: '3',
					// 	paymentShow: false,
					// 	img: require('../static/images/productDetails/yh.png')
					// },
				],
				orderId: '',
				orderData: null,
				countdownShow: false,
				normalOrderOvertime: 0,
				minute: 0,
				second: 0
			}
		},
		onLoad(data) {
			if (data) {
				this.orderId = data.order
			}
			this.orderDetail()

		},
		methods: {
			orderPaySuccess() {
				let data={
					orderId: this.orderData.id,
					payType: this.orderData.payType
				}
				
				API.orderPaySuccess(data).then(res => {
						if (res.code == 200) {
							this.$alert(res.message);
							uni.navigateTo({
								url:'/pages/user/obligation?status=1'
							})
						}
					})
					.catch(err => {
						// this.$alert(res.message);
					})
			},
			getOrderSetting() {
				let data = {
					orderId: this.orderId
					// orderId: 89
				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
				}
				API.getOrderSetting(data, args).then(res => {
						if (res.code == 200) {
							this.normalOrderOvertime = res.data.normalOrderOvertime
							let now = new Date(); // 设置时间为当前时间加上30分钟
							let expire = new Date(this.orderData.createTime)
							expire.setMinutes(expire.getMinutes() + (this.normalOrderOvertime - 2));
							let time1 = this.dayjs(expire);
							let time2 = this.dayjs(now);
							console.log(expire)
							// 计算时间差并转换为其他单位
							let diffSeconds = time1.diff(time2, 'second'); // 秒
							let diffMinutes = time1.diff(time2, 'minute'); // 分钟
							let diffHours = time1.diff(time2, 'hour'); // 小时
							console.log('时间差（秒）:', diffSeconds);
							console.log('时间差（分钟）:', diffMinutes);
							console.log('时间差（小时）:', diffHours);
							if (diffMinutes > this.normalOrderOvertime) {
								console.log('超时订单')
							} else {
								this.minute = diffMinutes
								this.second = diffSeconds
								this.countdownShow = true
							}
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			orderDetail() {
				API.orderDetail(this.orderId).then(res => {
						if (res.code == 200) {
							this.orderData = res.data
							this.getOrderSetting()
							

						}
					})
					.catch(err => {
						// this.$alert(res.message);
					})
			},
			open() {
				this.orderPaySuccess()
				// this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			payment(index) {
				for (let item of this.paymentList) {
					item.paymentShow = false
				}
				this.paymentList[index].paymentShow = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.confirmOrder {
		padding: 40rpx;

		::v-deep .uni-popup__wrapper-box {
			border-radius: 18rpx;
			max-height: 1600rpx !important;
		}
	}

	.timeText {
		color: #666;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
	}

	.money {
		font-weight: 600;
		margin-bottom: 40rpx;

		text {
			font-size: 60rpx;
			font-weight: 600;
		}
	}

	.timePayment {
		text-align: center;
		padding-top: 80rpx;
	}

	.paymentTitle {
		color: #666666;
	}

	.paymentList {
		border-radius: 32rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		color: #666666;

		.paymentDom {
			padding: 20rpx 0;
			border-bottom: 2rpx solid rgba(221, 221, 221, 0.87);
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.paymentName {
				display: flex;
				align-items: center;

				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 20rpx;
				}
			}

			.paymentHide,
			.paymentShow {
				width: 30rpx;
				height: 30rpx;
				border: 1px solid #D9D9D9;
				border-radius: 50%;
			}

			.paymentShow {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.paymentDom:last-child {
			border-bottom: none;

		}
	}

	.paymentfiex {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 40rpx 0;
		width: 100%;


	}

	.paymentBtn {
		width: 580rpx;
		height: 80rpx;
		background: #6954D5;
		border-radius: 40rpx;
		color: #fff;
		text-align: center;
		margin: auto;
		line-height: 80rpx;
	}

	.uniPopupTitle {
		text-align: center;

		image {
			width: 30rpx;
			position: absolute;
			left: 30rpx;
		}

		.money {
			font-size: 46rpx;
		}
	}

	.uniPopupList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		color: #666;

		.popupTitle {
			display: flex;
			align-items: center;
		}

		.popupTitleImg {
			width: 40rpx;
		}
	}

	.uniPopupList:nth-child(3) {
		border-top: 2rpx solid #f5f5f5;
	}

	.channel {
		background: #F9F9F9;
		border-radius: 16px;
		padding: 40rpx;
		color: #999;
		margin-bottom: 40rpx;
		font-size: 26rpx;

		.channelList {
			margin-bottom: 20rpx;
		}

		.channelTitle {
			padding-bottom: 15rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(221, 221, 221, 0.87);
		}

		.popupTitle {
			color: #333;
			font-size: 30rpx;

			view {
				color: #999;
			}
		}

		.paymenAll {
			text-align: center;
		}

		.payType {
			border-bottom: 1px solid rgba(221, 221, 221, 0.87);
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

	.tip {
		text-align: center;
		color: rgba(153, 153, 153, 0.93);
		font-size: 24rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
</style>